<template>
	<div >
		<div class="main" ref="target"></div>
	</div>
</template>

<script setup>
import echarts from 'echarts';
import { ref, onMounted,  } from 'vue';

const target = ref(null);
let myChart;

onMounted(() => {
	myChart = echarts.init(target.value, 'light');
	renderChart();
});

const renderChart = () => {
	var option = {
		color:'#948BAE',
		title: {

		},
		tooltip: {},
		legend: {
			data: ['销量']
		},
		xAxis: {
			data: ['3-13', '3-14', '3-15', '3-16', '3-17', '3-17','3-19','3-20','3-21','3-22','3-23','3-24','3-25','3-26']
		},
		yAxis: {},
		series: [
			{
				// name: '销量',
				type: 'bar',
				data: [5, 4, 3, 4.5, 2, 4,5,3,2,2,4.5,2,4,3],
				barWidth:18,
			}
		]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
};
</script>

<style lang="scss" scoped>
.main {
	height: 400px;
	width: 100%;
}
</style>